<script setup>
import { useRouter } from 'vue-router'
import Logo from "@/layouts/Logo.vue";
import {useTabStore} from '@/stores/tab'
import {useUserStore} from "@/stores/user";
import * as ArcoIcons from '@arco-design/web-vue/es/icon'

const userStore = useUserStore()
const tabStore = useTabStore()
const router = useRouter()

defineProps({
  isCollapsed: Boolean
})

const navigate = (menuItem) => {
  if("/dashboard" === menuItem){
    router.push(menuItem)
    return
  }
  tabStore.addTab(menuItem)
  router.push(menuItem.menu.path)
};
const handleCollapse = (collapsed) => {
  console.log('collapsed:', collapsed)
}

const getValidIcon = (iconName) => {
  const defaultIcon = 'IconBook'
  if (!iconName) return defaultIcon
  // 检查图标是否存在
  return ArcoIcons[iconName] ? ArcoIcons[iconName]  : ArcoIcons[defaultIcon]
}

</script>

<template>
  <a-layout-sider class="layout-demo" collapsible @collapse="handleCollapse">
    <!-- 美化LOGO区域 -->
    <Logo
        :is-collapsed="isCollapsed"
        @logo-click="navigate('/dashboard')"
    />
    <a-menu>
      <template v-for="item in userStore.activeMenuTree" :key="item.menu.id">
        <a-sub-menu
            v-if="item.children?.length">
          <template #title>
            <component :is="getValidIcon(item.menu.icon)"/>{{item.menu.menuName}}
          </template>
          <a-menu-item
              v-for="child in item.children"
              :key="child.menu.id"
              @click="navigate(child)"
          >
            <component :is="getValidIcon(child.menu.icon)"/>{{ child.menu.menuName }}
          </a-menu-item>
        </a-sub-menu>

        <a-menu-item
            v-else
            :key="item.menu.id"
            @click="navigate(item)">
          <component :is="getValidIcon(item.menu.icon)"/>{{ item.menu.menuName }}
        </a-menu-item>
      </template>
    </a-menu>
  </a-layout-sider>

</template>

<style scoped>
</style>